<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/common.jspf"%>
<%@ include file="/common/taglibs.jspf"%>
<html lang="en">
<head>
<!-- jquery-ztree -->
<link
	href="${contextPath}/static/widgets/jquery-ztree/css/zTreeStyle.css"
	rel="stylesheet" />
</head>
<body>
	<div class="row">
		<!-- user-group-tree -->
		<div class="span3">
			<div>
				<s:message code="userGroup" />
			</div>
			<div>
				<ul id="user-group-tree" class="ztree"></ul>
			</div>
		</div>
		<!-- user-group-grid -->
		<div class="span9">
			<div>
				<c:if test="${empty currentUserGroup}">
					<s:message code="userGroup" />
				</c:if>
				<c:if test="${not empty currentUserGroup}">
					<s:message code="userGroup.type.${currentUserGroup.type }" />: ${currentUserGroup.name }
                <div class="pull-right">
						<button type="button" class="btn btn-small btn-primary"
							onclick="editUserGroup(${currentUserGroup.id}, ${currentUserGroup.type}, '${currentUserGroup.name}');">
							<s:message code="btn.edit" />
						</button>
						&nbsp;
						<button type="button" class="btn btn-small btn-danger"
							onclick="deleteUserGroup(${currentUserGroup.id});">
							<s:message code="btn.delete" />
						</button>
					</div>
					<div class="clear"></div>
				</c:if>
			</div>
			<div class="toolbar">
				<c:if test="${empty currentUserGroup}">
					<button type="button" class="btn" onclick="addUserGroup(1);">
						<s:message code="userGroup.func.addBranch" />
					</button>&nbsp;</c:if>
				<c:if test="${3!=currentUserGroup.type}">
					<button type="button" class="btn" onclick="addUserGroup(2);">
						<s:message code="userGroup.func.addDepartment" />
					</button>&nbsp;
                <button type="button" class="btn"
						onclick="addUserGroup(3);">
						<s:message code="userGroup.func.addGroup" />
					</button>
				</c:if>
				<c:if test="${3==currentUserGroup.type}">
					<button type="button" class="btn"
						onclick="addUserGroupMember(${currentUserGroup.id});">
						<s:message code="userGroup.func.addMember" />
					</button>
				</c:if>
			</div>
			<div>
				<c:if test="${3!=currentUserGroup.type}">
					<table
						class="table table-striped table-bordered table-hover datatable">
						<thead>
							<tr>
								<th><s:message code="userGroup.type" /></th>
								<th><s:message code="userGroup.name" /></th>
								<th><s:message code="userGroup.members" /></th>
								<th><s:message code="common.action" /></th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${subUserGroupList }" var="row">
								<tr>
									<td><s:message
											code="userGroup.type.${row.userGroup.type }" /></td>
									<td><a href="index.do?currentId=${row.userGroup.id }">${row.userGroup.name }</a></td>
									<td style="text-align: right">${row.memberCount }</td>
									<td>
										<div class="action-buttons">
											<li:p code="tenant.userGroup.edit">
												<a href="javascript:;"
													onclick="editUserGroup(${row.userGroup.id}, ${row.userGroup.type}, '${row.userGroup.name}');">
													<i class="icon-pencil"></i>
												</a>&nbsp;  
                                </li:p>
											<li:p code="tenant.userGroup.edit">
												<a href="javascript:;" class="red"
													onclick="deleteUserGroup(${row.userGroup.id});"> <i
													class="icon-trash"></i>
												</a>
											</li:p>
										</div>
									</td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</c:if>
				<c:if test="${3==currentUserGroup.type}">
					<table
						class="table table-striped table-bordered table-hover datatable">
						<thead>
							<tr>
								<th class="checkCol"><input type="checkbox" id="checkAll"
									name="checkAll" /></th>
								<th><s:message code="userInfo.loginId" /></th>
								<th><s:message code="userInfo.userName" /></th>
								<th><s:message code="userInfo.nickName" /></th>
								<th><s:message code="userInfo.status" /></th>
								<th><s:message code="common.action" /></th>
							</tr>
						</thead>
						<tbody>
							<c:forEach items="${memberList }" var="row">
								<tr id="userGroupBox_${row.userGroupMember.id }">
									<td class="checkCol"><input type="checkbox"
										class="checkItem" name="userGroupMemberIds"
										value="${row.userGroupMember.id }" /></td>
									<td><a
										href="${contextPath }/system/tenantMember/showByUserId.do?userId=${row.userGroupMember.userId }&decorator=popup"
										target="_blank"><c:out value="${row.userInfo.loginId }"></c:out>&nbsp;<i
											class="icon-info-sign"></i></a></td>
									<td><c:out value="${row.userInfo.userName }"></c:out></td>
									<td><c:out value="${row.userInfo.nickName }"></c:out></td>
									<td><c:out
											value="${li:genDictContent('1002', row.userInfo.status) }"></c:out></td>
									<td class="action-buttons"><a href="javascript:;"
										class="red"
										onclick="deleteUserGroupMember(${row.userGroupMember.id});">
											<i class="icon-trash"></i>
									</a></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
				</c:if>
			</div>
		</div>
	</div>
	<!-- user-group-modal -->
	<div id="user-group-modal" class="modal hide fade">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal"
				aria-hidden="true">&times;</button>
			<h3 id="user-group-form-title"></h3>
		</div>
		<div class="modal-body">
			<form id="theform" action="save.json" method="post"
				class="form-horizontal">
				<input type="hidden" id="userGroup-id" name="id" value="" /> <input
					type="hidden" id="userGroup-parentId" name="parentId"
					value="${currentUserGroup.id }" /> <input type="hidden"
					id="userGroup-type" name="type" value="1" />
				<div class="row-fluid">
					<div class="control-group">
						<label class="control-label" for="userGroup-name"><s:message
								code="userGroup.name" /></label>
						<div class="controls">
							<input id="userGroup-name" name="name" placeholder="" type="text" />
						</div>
					</div>
				</div>
			</form>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-primary"
				onclick="saveUserGroup();">
				<s:message code="btn.save" />
			</button>
			&nbsp;
			<button type="button" class="btn" data-dismiss="modal"
				aria-hidden="true">
				<s:message code="btn.cancel" />
			</button>
		</div>
	</div>
	<!-- user select dialog -->
	<%@ include file="selectUser.jsp"%>
	<!--page specific plugin scripts-->
	<!-- jquery-ztree -->
	<script
		src="${contextPath}/static/widgets/jquery-ztree/js/jquery.ztree.all-3.5.min.js"></script>
	<!-- angularjs -->
	<script type="text/javascript"
		src="${contextPath }/theme/default/js/angular.js"></script>
	<script type="text/javascript">
function zTreeOnClick(event, treeId, treeNode) {
  location.href = "index.do?currentId="+treeNode.id;
};

var setting = {
    data: {
        simpleData: {
            enable: true
        }
    }
    ,callback: {
  		onClick: zTreeOnClick
  	}    
};

var rootCode = "${rootNode.code}";

var zNodes =[
    { id:0, pId:-1, name:"根节点", open:true, isParent:true, iconSkin:"home"}
    <c:forEach items="${userGroupTree.subList}" var="row">
    ,{ id: ${row.id}, pId: ${row.parentId}, name:"${row.name}" <c:if test="${fn:startsWith(currentUserGroup.code, row.code)}">, open: true</c:if>, iconSkin:"${row.type==1?'building':''}${row.type==2?'department':''}${row.type==3?'group':''}" }
      <c:forEach items="${row.subList}" var="row1">
      ,{ id: ${row1.id}, pId: ${row1.parentId}, name:"${row1.name}" <c:if test="${fn:startsWith(currentUserGroup.code, row1.code)}">, open: true</c:if>, iconSkin:"${row1.type==1?'building':''}${row1.type==2?'department':''}${row1.type==3?'group':''}" }
        <c:forEach items="${row1.subList}" var="row2">
        ,{ id: ${row2.id}, pId: ${row2.parentId}, name:"${row2.name}" <c:if test="${fn:startsWith(currentUserGroup.code, row2.code)}">, open: true</c:if>, iconSkin:"${row2.type==1?'building':''}${row2.type==2?'department':''}${row2.type==3?'group':''}" }
          <c:forEach items="${row2.subList}" var="row3">
          ,{ id: ${row3.id}, pId: ${row3.parentId}, name:"${row3.name}" <c:if test="${fn:startsWith(currentUserGroup.code, row3.code)}">, open: true</c:if>, iconSkin:"${row3.type==1?'building':''}${row3.type==2?'department':''}${row3.type==3?'group':''}" }
          </c:forEach>
        </c:forEach>
      </c:forEach>
    </c:forEach>
];

$(document).ready(function(){	
  $.fn.zTree.init($("#user-group-tree"), setting, zNodes);
  
  $('.datatable').dataTable();				
});

function addUserGroup(type)
{
  switch(type)
  {
    case 1:
      $("#user-group-form-title").text("<s:message code='userGroup.func.addBranch'/>");
      break;
    case 2:
      $("#user-group-form-title").text("<s:message code='userGroup.func.addDepartment'/>");
      break;
    case 3:
      $("#user-group-form-title").text("<s:message code='userGroup.func.addGroup'/>");  
      break;
  }  
  
  $("#userGroup-id").val("");
  $("#userGroup-type").val(type);  
  $('#user-group-modal').modal('show');
}

function editUserGroup(id, type, name)
{
  switch(type)
  {
    case 1:
      $("#user-group-form-title").text("<s:message code='userGroup.func.editBranch'/>");
      break;
    case 2:
      $("#user-group-form-title").text("<s:message code='userGroup.func.editDepartment'/>");
      break;
    case 3:
      $("#user-group-form-title").text("<s:message code='userGroup.func.editGroup'/>");  
      break;
  }  
  
  $("#userGroup-id").val(id);
  $("#userGroup-type").val(type);  
  $("#userGroup-name").val(name);  
  $('#user-group-modal').modal('show');
}

function saveUserGroup()
{
  var id = $("#userGroup-id").val();	
  if(id==null || id=="")
  {
    $.webtools.ajax({
  	url: "save.json",
  	params: {"parentId": $("#userGroup-parentId").val()
  	  ,"type": $("#userGroup-type").val()
  	  ,"name": $("#userGroup-name").val()
  	},
  	success: function(reply) {
  		location.reload();
  	}
    });	
  }
  else 
  {
    $.webtools.ajax({
    	url: "update.json",
    	params: {"id": $("#userGroup-id").val()	  
    	  ,"name": $("#userGroup-name").val()
    	},
    	success: function(reply) {
    		location.reload();
    	}
    });	
  }
  		
}
				
function deleteUserGroup(id)
{			
	bootbox.confirm("<s:message code='common.delete.confirm' />", function(result){
		if(result)
		{
			$.webtools.ajax({
				url: "delete.json",
				params: {"id":id},
				success: function(reply) {
					location.href = "index.do?currentId=${currentUserGroup.parentId}";
				}
			});					
		}				
	});			
}	

function deleteUserGroupMember(id)
{     
  bootbox.confirm("<s:message code='userGroup.func.deleteMember.confirm' />", function(result){
    if(result)
    {
      $.webtools.ajax({
        url: "deleteMember.json",
        params: {"id":id},
        success: function(reply) {
          $("#userGroupBox_"+id).remove();
        }
      });         
    }       
  });     
}   

function addUserGroupMember(userGroupId)
{
  $("#tenantMemberSelectModal").modal();
}

function onMemberSelected(userIds)
{
  $.webtools.ajax({
	url: "saveMemberBatch.json",
	params: {"groupId": "${currentUserGroup.id}","userIds":userIds},
	success: function(reply) {
		location.reload();
	}
  });
}
</script>
</body>
</html>
